﻿@model CTM.Web.Models.View.Report.ReportViewModel
@using CTM.Web.Utils
@{
    ViewBag.Title = "Manager Report";
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    int totalConversation = Model.TotalConversations;
    int totalFeedback = Model.TotalFeedbacks;
    var chartConversationStatusData = Model.ChartConversationStatusData;
    var chartConversationClassificationData = Model.ChartConversationClassificationData;
    var chartFeedbackData = Model.ChartFeedbackData;
}

<link rel="stylesheet" href="@Url.Content("~/Content/awesome-bootstrap-checkbox.css")" type="text/css">

<br />

<div id="site-wrapper">
    <div id="site-canvas">
        <div id="site-menu">

            <form onsubmit="getSummaries(event);" id="report-filter-form">
                <input type="hidden" name="Id" value="@Model.Id" />
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-md-3">Year</label>
                                <div class="col-md-9">
                                    <div class="input-group year">
                                        <input type="text" class="form-control" name="Year" value="@Model.Year" onchange="$(this).closest('form').submit();" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        @Html.CheckBoxFor(x => x.IncludeIndirectEmployees, new { id = "chb-indirect", onchange = "$(this).closest('form').submit();" })
                        <label for="chb-indirect">&nbsp;&nbsp;Include Indirect Employees</label>
                    </div>
                    <div class="col-md-12">
                        <div class="checkbox checkbox-circle">
                            <input type="checkbox" id="chb-org-all" checked>
                            <label for="chb-org-all">Check All</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id="treeviewOrg"></div>
                    </div>
                </div>
            </form>

        </div>
        <a class="toggle-nav btn btn-xs btn-success active" id="big-sexy">
            <i class="fa fa-filter"></i> Toggle Filter
        </a>

        <div id="report-summary">
            @Html.Partial("_Summary", Model)
        </div>
    </div>
</div>

<style>
    #site-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
        /*height: 5000px;  /*Temp: Simulates a tall page. */
    }

    #site-canvas {
        width: 100%;
        /*height: 100%;*/
        position: relative;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: 300ms ease all;
        transition: 300ms ease all;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /*padding: 5% 0; /* Temp: Just spacing. */
    }

    .show-nav #site-canvas {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    #site-menu {
        width: 300px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -300px;
        /*background: #428bca;*/
        padding: 15px;
        overflow-y: auto;
    }
</style>

@section scripts {
    @Styles.Render("~/Content/morris")
    @Scripts.Render("~/bundles/raphael")
    @Scripts.Render("~/bundles/morris")

    <script type="text/javascript">
    function getSummaries(e) {
        e.preventDefault();
        var form = $('#report-filter-form')[0];
        var formData = {
            Id: form.elements.Id.value,
            Year: form.elements.Year.value,
            IncludeIndirectEmployees: $('#chb-indirect')[0].checked,
            Orgs: []
        };

        var _nodes = $('#treeviewOrg').treeview('getChecked');
        for (var i = 0; i < _nodes.length; i++) {
            formData.Orgs.push(_nodes[i].id);
        }

        $.ajax({
            url: '@Url.Action("SummaryPartial", "Report")',
            data: JSON.stringify(formData),
            cache: false,
            type: 'POST',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $("#report-summary").html(data.html);
                initHomeCharts(data.totalConversation, data.totalFeedback,
                                data.chartConversationStatusData,
                                data.chartConversationClassificationData,
                                data.chartFeedbackData);

                $("#conversation-result").on("click", "thead th a, tfoot a", handleSortingAndPagingConversationGrid);
                $("#feedback-result").on("click", "thead th a, tfoot a", handleSortingAndPagingFeedbackGrid);
            },
            error: function (jqXHR, textStatus, errorThrown) {}
        });
    }

    function getConversations(e) {
        e.preventDefault();
        var form = $(e.target).closest('form')[0];
        var data = {
            Id: form.elements.Id.value,
            Year: form.elements.Year.value,
            IncludeIndirectEmployees: $('#chb-indirect')[0].checked,
            Statuses: [],
            Types: [],
            Keyword: form.elements.Keyword.value,
            Orgs: [],
            PageSize: form.elements.PageSize.value
        };
        for (var i = 0; i < form.elements.Statuses.length; i++) {
            if(form.elements.Statuses[i].checked) {
                data.Statuses.push(form.elements.Statuses[i].value);
            }
        }
        for (var i = 0; i < form.elements.Types.length; i++) {
            if(form.elements.Types[i].checked) {
                data.Types.push(form.elements.Types[i].value);
            }
        }
        var _nodes = $('#treeviewOrg').treeview('getChecked');
        for (var i = 0; i < _nodes.length; i++) {
            data.Orgs.push(_nodes[i].id);
        }
        $('#conversation-result').load('@Url.Action("ConversationPartial", "Report")', data);
    }

    function getFeedbacks(e) {
        e.preventDefault();
        var form = $(e.target).closest('form')[0];
        var data = {
            Id: form.elements.Id.value,
            Year: form.elements.Year.value,
            IncludeIndirectEmployees: $('#chb-indirect')[0].checked,
            Statuses: [],
            Keyword: form.elements.Keyword.value,
            Orgs: [],
            PageSize: form.elements.PageSize.value
        };
        for (var i = 0; i < form.elements.Statuses.length; i++) {
            if(form.elements.Statuses[i].checked) {
                data.Statuses.push(form.elements.Statuses[i].value);
            }
        }
        var _nodes = $('#treeviewOrg').treeview('getChecked');
        for (var i = 0; i < _nodes.length; i++) {
            data.Orgs.push(_nodes[i].id);
        }
        $('#feedback-result').load('@Url.Action("FeedbackPartial", "Report")', data);
    }

    function initHomeCharts(totalConversation, totalFeedback, chartConversationStatusData, chartConversationClassificationData, chartFeedbackData) {
        if(totalConversation > 0) {

            new Morris.Donut({
                // ID of the element in which to draw the chart.
                element: 'chart-status',
                // Chart data records -- each entry in this array corresponds to a point on the chart.
                data: chartConversationStatusData,
                colors: ['#8bc34a', '#ffc107', '#e84e40', '#03a9f4', '#9c27b0', '#90a4ae'],
                formatter: function (y) { return Math.round(y * 100 / totalConversation) + "%" },
                resize: true
            });

            new Morris.Donut({
                // ID of the element in which to draw the chart.
                element: 'chart-classification',
                // Chart data records -- each entry in this array corresponds to a point on the chart.
                data: chartConversationClassificationData,
                colors: ['#656d78', '#3bafda', '#E9573F'],
                formatter: function (y) { return Math.round(y * 100 / totalConversation) + "%" },
                resize: true
            });
        }

        if(totalFeedback > 0) {

            new Morris.Donut({
                // ID of the element in which to draw the chart.
                element: 'chart-feedback',
                // Chart data records -- each entry in this array corresponds to a point on the chart.
                data: chartFeedbackData,
                colors: ['#8bc34a', '#ffc107', '#e84e40', '#03a9f4', '#9c27b0', '#90a4ae'],
                formatter: function (y) { return Math.round(y * 100 / totalFeedback) + "%" },
                resize: true
            });
        }
    }

    $(function () {
        // Initialize charts
        initHomeCharts(@totalConversation, @totalFeedback,
            @Html.Raw(serializer.Serialize(chartConversationStatusData)),
            @Html.Raw(serializer.Serialize(chartConversationClassificationData)),
            @Html.Raw(serializer.Serialize(chartFeedbackData)));

        var jsonData = @Html.Raw(serializer.Serialize(ViewBag.Tree));

        var $checkableTree = $('#treeviewOrg').treeview({
            color: "#428bca",
            data: jsonData,
            showIcon: false,
            showCheckbox: true,
            onNodeChecked: function(event, node) {
                $('#report-filter-form').submit();
            },
            onNodeUnchecked: function (event, node) {
                $('#report-filter-form').submit();
            }
        });
        $('#treeviewOrg').treeview('checkAll', { silent: true });
        //$('#treeviewOrg').treeview('checkNode', [ 0, { silent: true } ]);

        // Check/uncheck all
        $('#chb-org-all').change(function() {
            if($('#chb-org-all').is(':checked')) {
                $checkableTree.treeview('checkAll', { silent: true });
            }
            else
            {
                $checkableTree.treeview('uncheckAll', { silent: true });
            }
            $('#report-filter-form').submit();
        });

        // Toggle Nav on Click
        $('.toggle-nav').click(function() {
            // Calling a function in case you want to expand upon this.
            toggleNav();
        });

        $("#conversation-result").on("click", "thead th a, tfoot a", handleSortingAndPagingConversationGrid);
        $("#feedback-result").on("click", "thead th a, tfoot a", handleSortingAndPagingFeedbackGrid);

    });

    function toggleNav() {
        if ($('#site-wrapper').hasClass('show-nav')) {
            // Do things on Nav Close
            $('#site-wrapper').removeClass('show-nav');
        } else {
            // Do things on Nav Open
            $('#site-wrapper').addClass('show-nav');
        }

        //$('#site-wrapper').toggleClass('show-nav');
    }

    function handleSortingAndPagingConversationGrid(e) {
        e.preventDefault();
        e.stopPropagation();
        var param = $(this).attr('href').split('?')[1];

        var form = $('#conversation-filter-form')[0];
        var data = {
            Id: form.elements.Id.value,
            Year: form.elements.Year.value,
            IncludeIndirectEmployees: $('#chb-indirect')[0].checked,
            Statuses: [],
            Types: [],
            Keyword: form.elements.Keyword.value,
            Orgs: [],
            PageSize: form.elements.PageSize.value
        };
        for (var i = 0; i < form.elements.Statuses.length; i++) {
            if(form.elements.Statuses[i].checked) {
                data.Statuses.push(form.elements.Statuses[i].value);
            }
        }
        for (var i = 0; i < form.elements.Types.length; i++) {
            if(form.elements.Types[i].checked) {
                data.Types.push(form.elements.Types[i].value);
            }
        }
        var _nodes = $('#treeviewOrg').treeview('getChecked');
        for (var i = 0; i < _nodes.length; i++) {
            data.Orgs.push(_nodes[i].id);
        }
        var url = '@Url.Action("ConversationPartial", "Report")' + '?' + param;
            $.ajax({
                url: url,
                type:'POST',
                data: JSON.stringify(data),
                dataType: 'html',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $('#conversation-result').html(data);
                },
                error: function () {}
            });
        }

        function handleSortingAndPagingFeedbackGrid(e) {
            e.preventDefault();
            e.stopPropagation();
            var param = $(this).attr('href').split('?')[1];

            var form = $('#feedback-filter-form')[0];
            var data = {
                Id: form.elements.Id.value,
                Year: form.elements.Year.value,
                IncludeIndirectEmployees: $('#chb-indirect')[0].checked,
                Statuses: [],
                Keyword: form.elements.Keyword.value,
                Orgs: [],
                PageSize: form.elements.PageSize.value
            };
            for (var i = 0; i < form.elements.Statuses.length; i++) {
                if(form.elements.Statuses[i].checked) {
                    data.Statuses.push(form.elements.Statuses[i].value);
                }
            }
            var _nodes = $('#treeviewOrg').treeview('getChecked');
            for (var i = 0; i < _nodes.length; i++) {
                data.Orgs.push(_nodes[i].id);
            }
            var url = '@Url.Action("FeedbackPartial", "Report")' + '?' + param;
            $.ajax({
                url: url,
                type:'POST',
                data: JSON.stringify(data),
                dataType: 'html',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $('#feedback-result').html(data);
                },
                error: function () {}
            });
        }

    </script>
}
